<template>
  <el-menu-item index="5" @click="handleClick"> 事件更新</el-menu-item>

  <div id="popup4" class="ol-popup">
    <div class="event-head">
      <span>事件详细信息</span>
      <a
        href="javascript:void(0)"
        id="popup-closer"
        class="ol-popup-closer"
        @click="handleClose"
      ></a>
    </div>

    <div class="event-box">
      <div class="event-item">
        <table>
          <tr>
            <th>事件编号</th>
            <td>{{ eventnum }}</td>
          </tr>
          <tr>
            <th>事件类型</th>
            <td>{{ eventtype }}</td>
          </tr>
          <tr>
            <th>事件等级</th>
            <td>{{ level }}</td>
          </tr>
          <tr>
            <th>发生时间</th>
            <td>{{ eventtime }}</td>
          </tr>
          <tr>
            <th>发生地点</th>
            <td>{{ eventlocation }}</td>
          </tr>
          <tr>
            <th>车牌号</th>
            <td>{{ eventcarnum }}</td>
          </tr>
          <tr>
            <th>驾驶员</th>
            <td>{{ eventdriver }}</td>
          </tr>
          <tr>
            <th>处理状态</th>
            <td>
              <select id="event-state" name="state" v-model="changestate">
                <option value="pending" selected hidden>{{ state }}</option>
                <option
                  :value="index"
                  v-for="(item, index) in statearr"
                  :key="index"
                >
                  {{ item }}
                </option>
              </select>
            </td>
          </tr>
        </table>
      </div>
      <div class="event-btn">
        <button class="evt-submit" @click="handleupdate">提交</button>
        <button class="evt-cancel" @click="handleCancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { Point } from "@/api/mapgis-api/Point";
const { proxy } = getCurrentInstance();

const eventnum = ref(); // 用于显示事件编号
const eventtype = ref(""); // 用于显示事件类型
const eventlevel = ref(""); // 用于显示事件等级
const eventtime = ref(""); // 用于显示事件发生时间
const eventlocation = ref(""); // 用于显示事件发生地点
const eventcarnum = ref(""); // 用于显示车牌号
const eventdriver = ref(""); // 用于显示驾驶员
const eventstate = ref("");

const state = ref("");
const level = ref("");
// const statearr = ref(["处理中","待处理","已归档"]);
const statearr = ref(["待处理", "处理中", "已归档"]);

const poptrigger = ref(false); // 用于触发弹出窗的元素
/* 声明变量 */
let map, docLayer;
let popup;
// =========================点击菜单项弹出弹框====================
const handleClick = () => {
  poptrigger.value = true; // 显示弹窗
};
/* 关闭弹窗 */
const handleClose = () => {
  popup.setPosition(null);
  poptrigger.value = false;
};
/* 取消 */
const handleCancel = () => {
  popup.setPosition(null);
};
// ========================点击要素进行查询=========================
onMounted(() => {
  /* ===================map,popup=============== */
  docLayer = proxy.$docLayer;
  map = proxy.$map;
  /* 创建popup容器 */
  var container = document.getElementById("popup4");
  popup = new ol.Overlay({
    element: container,
    autoPan: true,
    positioning: "top-center",
    stopEvent: true,
    autoPanAnimation: {
      duration: 250,
    },
  });
  map.addOverlay(popup);

  /* =================绑定点击事件=================== */
  map.on("click", (evt) => {
    let position = evt.coordinate;
    // console.log(position);
    /* ================创建用于查询的点============= */
    let pointObj = new Zondy.Object.Point2D(position[0], position[1]);
    /* 如果zoom太小扩大搜索半径 */
    pointObj.nearDis = 0.005;
    //1、初始化查询结构对象，设置查询结构包含几何信息
    var queryStruct = new Zondy.Service.QueryFeatureStruct();
    //是否包含几何图形信息
    queryStruct.IncludeGeometry = true;
    //是否包含属性信息
    queryStruct.IncludeAttribute = true;
    //是否包含图形显示参数
    queryStruct.IncludeWebGraphic = false;
    //2、指定查询规则
    var rule = new Zondy.Service.QueryFeatureRule({
      //是否将要素的可见性计算在内
      EnableDisplayCondition: false,
      //是否完全包含
      MustInside: false,
      //是否仅比较要素的外包矩形
      CompareRectOnly: false,
      //是否相交
      Intersect: true,
    });
    //3、实例化查询参数对象
    var queryParam = new Zondy.Service.QueryParameter({
      geometry: pointObj,
      resultFormat: "json",
      struct: queryStruct,
      rule: rule,
    });
    //4、实例化地图文档查询服务对象
    var queryService = new Zondy.Service.QueryDocFeature(
      queryParam,
      "guanggu",
      2,
      {}
    );
    //执行查询操作，querySuccess为查询回调函数
    /* 执行查询--获取查询的点 */
    queryService.query((data) => {
      querySuccess(data); // 将像素位置传递给查询成功回调函数
    });
  });
});
//==========================查询成功回调函数==============
let id = ref(null);
const values = ref(null);
let pos;
function querySuccess(data) {
  /* data是mapgis的要素 */
  /* 解析json数据转化为layer对象 */
  var format = new Zondy.Format.PolygonJSON();
  var features = format.read(data);
  console.log(features, " fid");
  // console.log(features);
  if (features && poptrigger.value) {
    console.log("查询成功");
    const firstFeature = features[0];
    values.value = firstFeature.get("values_");
    // console.log(values.value);
    // id.value=firstFeature.getFID()
    // console.log(id.value)
    // console.log(values);
    // 显示事件信息

    id.value = firstFeature.id_;
    console.log(id.value, "id_");

    eventnum.value = values.value.事件编号;
    eventtype.value = values.value.事件类型;
    eventlevel.value = values.value.事件等级;
    eventtime.value = values.value.发生时间;
    eventlocation.value = values.value.发生地点;
    eventcarnum.value = values.value.车牌号;
    eventdriver.value = values.value.驾驶员;
    eventstate.value = values.value.处理状态;
    changestate.value = values.value.处理状态;

    // console.log(eventstate.value);
    // console.log(eventdriver.value);

    // 判断交通事故
    if (eventtype.value == 1) {
      level.value = "轻微事故";
    } else if (eventtype.value == 2) {
      level.value = "一般事故";
    } else if (eventtype.value == 3) {
      level.value = "重大事故";
    } else {
      level.value = "特大事故";
    }
    // 判断默认处理状态
    if (eventstate.value == "0") {
      state.value = "待处理";
    } else if (eventstate.value == "1") {
      state.value = "处理中";
    } else {
      state.value = "已归档";
    }

    // console.log(state.value);
    const properties = firstFeature.getProperties();
    // console.log(properties);
    pos = properties.geometry.flatCoordinates; // 从属性对象中获取
    console.log(pos, "pos");
    popup.setPosition([pos[0] , pos[1]]);
  }
}
// =========================状态更新函数======================
const changestate = ref(state.value);
console.log(changestate.value);
function handleupdate() {
  let fid = id.value;
  let position = pos;
  let attr = [
    //   { name: "mpLayer", type: "string", value: '0' },
    { name: "事件编号", type: "string", value: eventnum.value },
    { name: "事件类型", type: "string", value: eventtype.value },
    { name: "事件等级", type: "string", value: eventlevel.value },
    { name: "发生时间", type: "string", value: eventtime.value },
    { name: "发生地点", type: "string", value: eventlocation.value },
    { name: "车牌号", type: "string", value: eventcarnum.value },
    { name: "驾驶员", type: "string", value: eventdriver.value },
    { name: "处理状态", type: "string", value: changestate.value },
  ];
  console.log(changestate.value);
  let service = {
    docName: "guanggu",
    layerId: 2,
  };
  let color;
  if (changestate.value == "0") {
    color = 6;
  } else if (changestate.value == "1") {
    color = 4;
  } else {
    color = 90;
  }
  Point.update({
    docLayer,
    position,
    attr,
    fid,
    service,
    color,
  });
  popup.setPosition(null);
  poptrigger.value = false;
}
</script>

<style scoped>
.event-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  width: 300px;
  color: #fff;
  font-size: 15px;
  background-color: #2196f3;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.event-box {
  /* width: 300px; */
  padding: 15px 15px;
  background-color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

table,
tr,
th,
td {
  text-align: left;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-collapse: collapse;
}
table th {
  width: 20%;
}
table td {
  width: 33%;
  color: #686868;
}
input {
  width: 100%;
  padding: 3px;
  color: #686868;
}
#event-type,
#event-level,
#event-state {
  width: 100%;
  padding: 3px;
  color: #686868;
  border-color: #ddd;
  border-radius: 4px;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
}
#event-type:focus,
#event-level:focus,
#event-state:focus,
#event-time:focus,
input:focus {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 1px 1px #2196f3;
}
#event-time,
input {
  width: 100%;
  border: none;
}
.event-btn {
  margin-top: 15px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.evt-submit {
  background-color: #2196f3;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.evt-cancel {
  background-color: #fff;
  color: #4b4a4a;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.ol-popup {
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}
</style>
